<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <input id="msg" type="text" />
    <button onclick="send()">发送消息</button>
    <hr>

    <button onclick="reminder()">催单</button>
    <audio src="reminder.mp3" id="reminderAudio"></audio>
</body>
<script>
    // 创建WebSocket对象，并建立连接
    const clientId = Math.random().toString(36).substr(2);

    const websocket = new WebSocket("ws://localhost:8080/ws/" + clientId);

    websocket.onopen = function() {
        console.log("建立连接成功。。。。。。。");
    }

    websocket.onerror = function() {
        console.log("建立连接失败。。。。。。。");
    }

    websocket.onmessage = function(event) {
        // console.log("接收到消息：" + event.data);

        var msg = JSON.parse(event.data);
        if(msg.type == 1){ // 催单
            alert(`客户催单啦，订单号：${msg.orderNumber}，请及时处理！`);
            $('#reminderAudio')[0].currentTime = 0
            $('#reminderAudio')[0].play()
        }else if(msg.type == 2){ // 新订单

        }

    }

    function send(){
        websocket.send($("#msg").val());
    }

    // 监听窗口关闭
    window.onbeforeunload = function() {
        websocket.close();
    }

    function  reminder(){
        $.ajax({
            url: "http://localhost:8080/orders/reminder/1001",
            type: "get",
            dataType:'json',
            success: function (res) {
                console.log(res)
            }
        });
    }

</script>
</html>